<h1 mat-dialog-title>{{ 'USER.MFA.U2F_DIALOG_TITLE' | translate }}</h1>
<div mat-dialog-content>
  <p>{{ 'USER.MFA.U2F_DIALOG_DESCRIPTION' | translate }}</p>

  <cnsl-form-field class="form-field" label="Name" required="true">
    <cnsl-label>{{ 'USER.MFA.U2F_NAME' | translate }}</cnsl-label>
    <input cnslInput [(ngModel)]="name" required (keydown.enter)="name ? closeDialogWithCode() : null" />
  </cnsl-form-field>

  <mat-spinner diameter="30" *ngIf="loading"></mat-spinner>

  <p class="error">{{ error }}</p>
</div>
<div mat-dialog-actions class="action">
  <button mat-stroked-button (click)="closeDialog()">{{ 'ACTIONS.CLOSE' | translate }}</button>
  <button
    cdkFocusInitial
    [disabled]="!name"
    mat-raised-button
    class="ok-button"
    color="primary"
    (click)="closeDialogWithCode()"
  >
    {{ 'ACTIONS.VERIFY' | translate }}
  </button>
</div>
